<template>
    <Head>
        <Title>About</Title>
    </Head>
    <PageHeader title="About US" subtitle="About US" :image="`${$config.public.baseUrl}images/bg/home1/1.png`"/>
    <section class="about about--style5 padding-top padding-bottom">
        <div class="container">
            <WhoWeAre />
        </div>
    </section>
    <section class="feature padding-bottom padding-top ">
        <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
            <div class="section-header text-center">
                <div class="subtitle subtitle--style5 justify-content-center">
                    <p class="mb-0">Our specialties</p>
                </div>
                <h2>Look into Featured Courses</h2>
                <p class="style2">Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur
                    duis deserunt
                    mollit dolore cillum minim tempor enim.2</p>
            </div>
            <FeaturedSection :featureList="featureList" />
        </div>
    </section>
</template>

<script>
import PageHeader from '@/components/partials/PageHeader.vue'
import WhoWeAre from "@/components/modules/about/WhoWeAre.vue";
import FeaturedSection from "@/components/partials/FeaturedSection.vue";
export default {
    scrollToTop: true,
    components: { WhoWeAre, FeaturedSection, PageHeader },

    async setup() {
        const { axios } = fetchData()

        const featureListResponse = await axios.get('/feature_list.json')
        const featureList = featureListResponse.data

        return {
            featureList
        };
    },

}
</script>